import { PaginationDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Pagination);

## Usage

<Demo data={PaginationDemos.configurator} />

## Example with chunked content

<Demo data={PaginationDemos.withContent} />

## Controlled

To control component state provide `value` and `onChange` props:

```tsx
import { useState } from 'react';
import { Pagination } from '@mantine/core';

function Demo() {
  const [activePage, setPage] = useState(1);
  return (
    <Pagination value={activePage} onChange={setPage} total={10} />
  );
}
```

## Siblings

Control number of active item siblings with `siblings` prop:

<Demo data={PaginationDemos.siblings} />

## Boundaries

Control number of items displayed after previous and before next buttons with `boundaries` prop:

<Demo data={PaginationDemos.boundaries} />

## Hide pages controls

Set `withPages={false}` to hide pages controls:

<Demo data={PaginationDemos.withPages} />

<StylesApiSelectors component="Pagination" />

<Demo data={PaginationDemos.stylesApi} />

## Compound components

You can use the following compound components to have full control over the `Pagination` rendering:

- `Pagination.Root` – context provider
- `Pagination.Items` – items list
- `Pagination.Next` – next control
- `Pagination.Previous` – previous control
- `Pagination.First` – first control
- `Pagination.Last` – last control

<Demo data={PaginationDemos.composition} />

## Controls as links

<Demo data={PaginationDemos.links} />

## Change icons

<Demo data={PaginationDemos.icons} />

<AutoContrast component="Pagination" withVariant={false} />

<Demo data={PaginationDemos.autoContrast} />

## use-pagination hook

If you need more flexibility `@mantine/hooks` package exports [use-pagination](/hooks/use-pagination/) hook,
you can use it to create custom pagination components.
